<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-select-project-container`]">
      <view class="search-box">
        <uv-input placeholder="请输入您要搜索的门店名称" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" v-model="text" @input.trim="bindKeyInput"></uv-input>
        <text class="close" @click="close">取消</text>
      </view>
      <view class="input-list" v-if="text">
        <template v-if="searchList.length != 0">
          <view v-for="(item, index) in searchList" :key="index" class="input-item" @click="handleSelect(item)">
            <view class="detail">
              <uv-icon name="map"></uv-icon>
              <view class="desc">
                <span v-for="(items, indexs) in item.parts" :key="indexs" :class="items.isMatch ? 'primary' : ''">{{ items.text }}</span>
              </view>
            </view>
            <view class="address">{{ item.suggestion_format_address }}</view>
          </view>
        </template>
      </view>
      <template v-else>
        <view class="poisition" v-if="positioningProject.id">
          <view class="title">当前定位</view>
          <view class="tag" @click="handleSelect(positioningProject)">{{ positioningProject.name }}</view>
        </view>
        <view class="list" v-if="list.length">
          <view class="title">其他门店</view>
          <view class="list-item" v-for="(item, index) in list" :key="item.id" @click="handleSelect(item)">{{ item.name }}</view>
        </view>
      </template>
    </view>
  </cu-layout>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { projectList, signProject } from './api'
export default {
  name: 'componentName',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      positioningProject: {
        id: '',
        name: '',
        longitude: '',
        latitude: '',
        distance: '',
      },
      text: '',
      searchList: [],
      list: [],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['locationInfo', 'cityConfig']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    bindKeyInput(e) {
      if (e) {
        this.start = 0
        this.searchList = []
      }
      const text = e || this.text
      if (!text) return
      uni.$uv.debounce(() => {
        if (!this.list.some((v) => v.name.includes(text))) {
          return false
        }
        const list = this.list.map((v) => {
          const splitText = v.name.split(new RegExp(`(${text})`, 'g')) // 使用正则表达式进行分割，并保留分隔符
          // 创建一个新的对象来存放分割后的内容
          let result = { parts: [], ...v }
          // 遍历分割后的数组，按顺序将内容添加到 parts 数组中
          for (let i = 0; i < splitText.length; i++) {
            if (splitText[i]) {
              // 将每个部分按顺序添加到 parts 数组中
              result.parts.push({
                text: splitText[i],
                isMatch: splitText[i] === text, // 用于标记是否为匹配部分
              })
            }
          }
          // 返回新的对象
          return result
        })
        this.searchList = list
        console.log('list', list)
      }, 300)
    },
    async getData() {
      const { latitude, longitude } = this.locationInfo
      const { cityId } = this.cityConfig
      const { type } = this.$Route.query
      // projectList 预定 signProject 签约
      let { data } = type === 'reserved' ? await projectList({ latitude, longitude, city_id: cityId }) : await signProject({ latitude, longitude, cityId })
      if (data.length === 0) {
        return uni.$uv.toast('当前项目为空')
      }
      for (let key in this.positioningProject) {
        this.positioningProject[key] = data[0][key]
      }
      this.list = data
      // .splice(1)
    },
    handleSelect({ id, name }) {
      const { path } = this.$Route.query
      this.$ROUTE.go(path, { projectId: id, projectName: name })
    },
    close() {
      const { path } = this.$Route.query
      this.$ROUTE.go(path)
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('select-project-container')} {
  position: relative;
  background: white;
  padding: 0px 15px 10px;
  overflow-y: scroll;
  .search-box {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    background: white;
    ::v-deep .uv-input {
      width: 80%;
    }
    .close {
      text-align: center;
      width: 20%;
    }
  }
  .title {
    font-weight: bold;
    font-size: 32rpx;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .name {
    font-size: 28px;
  }
  .poisition {
    .tag {
      padding: 5px 10px;
      border: 2rpx solid #f1f1f1;
      border-radius: 8rpx;
      display: inline-block;
    }
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      width: 100%;
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}
.input-list {
  display: flex;
  flex-direction: column;
  margin-top: 40rpx;
  .input-item {
    font-size: 28rpx;
    font-weight: bold;
    color: #222;
    width: 646rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 32rpx;
    display: flex;
    flex-wrap: wrap;
    .detail {
      display: flex;
      .desc {
        margin-left: 10rpx;
      }
      .primary {
        color: $uv-primary;
      }
    }
    .address {
      flex-basis: 100%;
      margin-left: 40rpx;
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>
